<template>
  <el-dialog
    :title="isAdd ? '新增数据源信息' : '修改数据源信息'"
    v-model="open"
    width="500px"
    append-to-body
    @close="cancel"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="连接名称" prop="souName">
        <el-input v-model="form.souName" placeholder="请输入连接名称" />
      </el-form-item>
      <el-form-item label="连接类型" prop="souTupe">
        <el-select
          v-model="form.souTupe"
          placeholder="请选择连接类型"
          style="width: 100%"
        >
          <el-option label="mysql" value="mysql"></el-option>
          <el-option label="RapidsDB" value="RapidsDB"></el-option>
          <el-option label="SQL Sever" value="SQL Sever"></el-option>
          <el-option label="Mongodb" value="Mongodb"></el-option>
          <el-option label="Postgresql" value="Postgresql"></el-option>
          <el-option label="Hbase" value="Hbase"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="连接用户" prop="souUser">
        <el-input v-model="form.souUser" placeholder="请输入连接用户" />
      </el-form-item>
      <el-form-item label="连接密码" prop="souPassword">
        <el-input
          v-model="form.souPassword"
          placeholder="请输入连接密码"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item label="连接描述" prop="souDescirbe">
        <el-input v-model="form.souDescirbe" placeholder="请输入连接描述" />
      </el-form-item>
      <el-form-item label="连接内容" prop="souConnet">
        <el-input v-model="form.souConnet" placeholder="请输入连接内容" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, toRefs, defineEmits } from "vue";
import { addSource, updateSource } from "@/api/system/datasource.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  isAdd: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["refresh"]);

let open = ref(false);
// 初始化表单
let form = reactive({
  souName: "",
  souTupe: "",
  souUser: "",
  souPassword: "",
  souDescirbe: "",
  souConnet: "",
});
const formRef = ref(null);
// 重置表单备份
const resetForm = reactive({ ...form });
// 表单校验
let rules = reactive({
  souName: [{ required: true, message: "连接名称不能为空", trigger: "blur" }],
  souTupe: [{ required: true, message: "连接类型不能为空", trigger: "blur" }],
  souUser: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  souPassword: [{ required: true, message: "密码不能为空", trigger: "blur" }],
});

/** 取消 */
const cancel = () => {
  reset();
  open.value = false;
};
/** 重置 */
const reset = () => {
  Object.assign(form, resetForm);
};
/** 提交 */
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      //触发成功验证表单，调用接口；
      if (props.isAdd) {
        addSource(form).then((res) => {
          ElMessage({
            message: "新增成功",
            type: "success",
          });
          emit("refresh");
          cancel();
        });
      } else {
        updateSource(form).then((res) => {
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          emit("refresh");
          cancel();
        });
      }
    }
  });
};
defineExpose({
  open,
  form,
});
</script>
